<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue语法</title>
</head>

<body>
    <div id="app">
        <div ref="one">{{n}}</div>
        <button @click="n++">add</button>
        <ul>
            <li v-for:="item in arr">{{item}}</li>
        </ul>
        <button @click="arr.push(6)">push</button>
        <div>{{obj.name}}</div>
        <button @click="obj.name='lisi'">change</button>
        <button @click="students[0].name='小米'">修改引用类型深层监听</button>
    </div>
    <script src="./vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    n: 1,
                    arr: [1, 2, 3],
                    obj: { name: "zhangsan", age: 20 },
                    students: [{ id: 1, name: "zhangsan" }, { id: 2, name: "lisi" }]
                }
            },
            methods: {
            },
            computed: {
            },
            watch: {
                n(newval, oldval) {
                    console.log(this.$refs.one)
                    console.log(this.n)
                },
                arr() {
                    console.log(this.arr)
                },
                "obj.name"(n, o) {
                    console.log(this.obj)
                },
                students: {
                    handler() {
                        console.log(this.students)
                    },
                    deep: true
                }
            },
            beforeCreate() {
                //创建前
                
            },
            created(){
                //创建后
                
            },
            beforeMount(){
                //渲染前
                
            },
            mounted(){
                //渲染后
                console.log(this.$refs.one)
                console.log(this.n)
            },
        }).mount('#app');
    </script>
</body>

</html>